<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhangxiang
 * @Date: 2022-07-19 09:42:10
 * @LastEditors: 976901273@qq.com
 * @LastEditTime: 2022-11-03 11:10:50
 * @Description:
 *
-->

<template>
  <div class="cn-insight-colony-container">
    <div style="height:200px;width:100%" v-show="clusterLoading" v-loading="clusterLoading"></div>
    <ClusterTemplate v-for="(item,index) in ClusterInfoArrs" :key="index" :cluster-info-arr="item" :cluster-index="index" />
  </div>
</template>

<script>
import ClusterTemplate from './ClusterTemplate.vue'
import { getCloudType, getClusterName, getClusterState } from '@/api/cnap/cn-insight'
export default {
  name: 'CNInsightColony',
  components: { ClusterTemplate },
  mixins: [],
  data() {
    return {
      clusterLoading:true,
      CloudTypeList: [], // 获取全部云服务提供商的类型
      ClusterInfoArrs: [] // 获取集群名称和状态信息列表
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getClusterInfoArrs()// 集群数据
  },
  methods: {
    /**
    * @description: 查询全部集群相关的信息
    * @return {*}
    */
    async getClusterInfoArrs() {
      await getCloudType().then((res1) => {
        this.CloudTypeList = Array.isArray(res1.data) ? res1.data : []
      })
      const cloudTypelen = this.CloudTypeList.length
      for (let i = 0; i < cloudTypelen; i++) {
        let clusterArr
        await getClusterName({ cloudVendor: this.CloudTypeList[i].key }).then((res2) => {
          clusterArr = Array.isArray(res2.data) ? res2.data : []
        })
        const clusterArrlen = clusterArr.length
        for (let j = 0; j < clusterArrlen; j++) {
          const params = {
            cloudVendor: this.CloudTypeList[i].key,
            cluster: clusterArr[j].key,
            page: '1',
            pageSize: '10'
          }
          await getClusterState(params).then((res3) => {
            this.clusterLoading = false
            this.ClusterInfoArrs.push((Array.isArray(res3.data.data) ? res3.data.data : [])[0])
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.cn-insight-colony-container {
  overflow: auto;
}
</style>
